<template>
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="1"
        >
            <ul>
                <li v-for="(item,index) in videoList" :key="index">
                    <div class="info" @click="touserdetails(item.r.a.id)">
                        <img  :src="item.r?.a?.p">
                        <span>{{item.r?.a?.n}}</span>
                        <i>LV.{{item.r?.a?.lvl}}</i>
                    </div>
                    <div class="showImg" @click="goMenuDeatail(item.r.id)">
                        <img :src="item.r.img">
                        <div class="tag">
                            <van-icon name="play"/>
                        </div>
                    </div>
                    <div class="collect">
                        <div class="left">
                            <div class="imgs" v-if="store.collect.indexOf(item.r.id)===-1">
                                <img v-for="i in item.r.collect_users" :key="i.id" :src="i.p">
                            </div>
                            <div v-else class="imgs">
                                <img :src="item.r?.a?.p">
                                <img v-for="i in item.r.collect_users.slice(0,3)" :key="i.id" :src="i.p">
                            </div>
                            <span v-if="store.collect.indexOf(item.r.id)===-1">{{item.r.fc}}人收藏</span>
                            <span v-else>{{item.r.fc+1}}人收藏</span>
                        </div>
                        <van-icon v-if="store.collect.indexOf(item.r.id)===-1" name="star-o" size="26" @click="addCollectList(item.r.id)" />
                        <van-icon v-else name="star" size="26" color="#ffd700" @click="store.removeCollectList(item.r.id)"/>

                    </div>
                    <div class="title">{{item.r.n}}</div>
                </li>
            </ul>
        </van-list>
    </van-pull-refresh>
</template>

<script lang="ts" setup>
import {useHomeStore} from '@/stores/home'
import {getVideoListAPI} from '@/api/api'
import {reactive,ref,onMounted} from "vue";
import router from '@/router';
import { useRoute } from 'vue-router';
import { useLogining, useLogin } from "../stores/index"
defineOptions({
    name: 'Video',
})
let route:any=useRoute()
let uselogining: any = useLogining()
let uselogin: any = useLogin()
const store = useHomeStore()
const videoList:any = reactive([])
let offset= 10
let limit = 10
let index= 0
const loading = ref(false);
const finished = ref(false);
const isLoading = ref(false);
//下拉刷新
const onRefresh = () => {
    //将数据清空
    videoList.splice(0,videoList.length)
    onLoad()
    isLoading.value = false;
};
//上拉加载更多
const onLoad = async () => {
    const {data:{result:{list}}} = await getVideoListAPI(offset*index,limit)
    videoList.push(...list.filter((i:any)=>i.type==1))
    loading.value = false;
    // 数据全部加载完成
    if (list.length ==0) {
        finished.value = true;
    }
    index++
}

let touserdetails: (id: number) => void = (id: number): void => {
    router.push({name: 'userdetails', params: {id: id,path:route.fullPath}})
}
//添加收藏
let addCollectList:(id:number)=>void=(id:number):void=>{
    if (uselogining.isLogining == 1) {
        store.addCollectList(id)
    }else{
       // 跳转到登录界面
       uselogin.updateLogin(true)
    }
}
//进入菜谱详情
let goMenuDeatail:(id:string)=>void=(id:string):void=>{
    router.push({name:"MenuDetail",params:{menuId:id,path:route.fullPath}})
}
onMounted((): void => {
    let isLogin = localStorage.getItem("isLogin")
    if (isLogin) {
        uselogining.updateLogining(isLogin)
  ;}
})
</script>

<style scoped lang="scss">
    ul{
        font-size: 16px;
        li{
            padding:10px;
            .info{
                display: flex;
                align-items: center;
                font-size: 16px;
                margin: 10px 0;
                img{
                    width:40px;
                    height: 40px;
                    border-radius: 50%;
                }
                span{

                    margin: 0 7px;
                }
                i{
                    color: gold;
                }
            }
        }
        .showImg{
            position: relative;
            img{
                width: 100%;
                border-radius: 10px;
            }
            .tag{
                position: absolute;
                bottom: 15px;
                right: 15px;
                background-color: rgba(0,0,0,0.5);
                border-radius: 50%;
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 16px;
            }
        }

        .collect{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 10px 0;
            .left{
                display: flex;
                align-items: center;
                .imgs{
                    display: flex;
                    img{
                        width: 20px;
                        border-radius: 50%;
                        border: 2px solid #fff;
                        //从第二个图片开始，向左移动10px
                        &:nth-child(n+2){
                            margin-left: -7px;
                        }
                    }
                }
                span{
                    margin-left: 5px;
                }
            }
        }
        .title{
            font-weight: bold;
        }
    }
</style>